<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <div id="app">
    <div class="page-node">
      <div class="nav-search">
        <input type="text" id="course-input" placeholder="请输入课程名称关键字，点击右侧按钮搜索">
        <div id="couse-search-btn" class="f-btn">
          <img height="50%" src="<%= require('./src/assets/img/icon-search.png') %>" alt="">
        </div>
      </div>

      <ul id="course-tab" class="course-top">
        <li><a data-type="all" class="cur-tab-item cur-top" href="javascript:;">全部</a></li>
        <li><a data-type="free" class="cur-tab-item" href="javascript:;">免费课程</a></li>
        <li><a data-type="vip" class="cur-tab-item" href="javascript:;">收费课程</a></li>
      </ul>

      <div class="course-wrapper">
        <ul id="course-list" class="course-list">
        </ul>
      </div>
    </div>
  </div>


  <!-- 单个课程模板文件 -->
  <script type="text/html" id="js-course-item-tpl">
    <li class="course-item">
      <a href="javascript:;" class="img-link">
        <img src="{{ imgName }}" alt="">
      </a>
      <div class="item-status">
        <span class="item-status-text">随到随学（共{{ courseSection }}节）</span>
      </div>
      <h4 class="item-tt">
        <a href="javascript:;" class="tt-link">{{ courseName }}</a>
      </h4>
      <div class="item-line">
        <span class="item-price {{ isFree }}">{{ price }}</span>
        <span class="item-info">{{ courseNum }}人最近报名</span>
      </div>
    </li>
  </script>

  <!-- 当列表为空时展示 -->
  <script type="text/html" id="js-course-nodata-tpl">
    <div class="no-data">
      <img class="no-data-img" src="{{ imgName }}" alt="" />
      <div class="no-data-text">{{ text }}</div>
    </div>
  </script>
</body>

</html>